<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微头条管理</title>
    <!--    bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .btn-light {
            border: 1px #dedede solid;
            float: left;
        }

        nav > div {
            width: 1400px;
            margin: 0 auto;
            text-align: center;
        }

        nav > div > h4 {
            display: inline;
            line-height: 38px;
        }

    </style>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-expand-sm bg-secondary">
    <div>
        <button type="button" class="btn btn-light" onclick="back()"><</button>
        <h4 style="color: white">微头条管理</h4>
    </div>
</nav>
<div id="app">
    <div class="row">
        <div class="col-sm-10 offset-md-1">
            <div class="trends_list">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row" style="text-align: center">
                            <div class="col-1">编号
                            </div>
                            <div class="col-3">动态详情
                            </div>
                            <div class="col-4">动态配图
                            </div>
                            <div class="col-2">发布时间
                            </div>
                            <div class="col-2">操作
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item" v-for="(micro,index) in microArr">
                        <div class="row" style="text-align: center">
                            <div class="col-1">{{index + 1 + (pageNum - 1) * 10}}
                            </div>
                            <div class="col-3" style="">
                                {{micro.content}}
                            </div>
                            <div class="col-4">
                                <img src="./img/eat.gif" class="rounded" height="70px">
                            </div>
                            <div class="col-2">{{micro.createTime}}
                            </div>
                            <div class="col-2">
                                <button type="button" class="btn btn-danger" data-toggle="modal"
                                        @click="delMicro(micro.id)" data-target="deleteModal">删除
                                </button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--分页-->
    <div class="row">
        <div class="col-sm-10 offset-md-1">
            <div class="page">
                <ul class="pagination justify-content-center" style="margin: 20px 0">
                    <li class="page-item disabled"><a class="page-link" href="#">页码</a></li>
                    <li class="page-item" v-for="n in pageInfo">
                        <a class="page-link" v-text="n" @click="loadMicro(n)" href="#">1</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="js/vue/vue.js"></script>
<script src="js/vue/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            microArr: [],
            pageNum: 1,
            pageSize: 10,
            pageInfo: 1,
            userId: 1
        },
        methods: {
            back() {
                history.back();
            },
            delMicro(id) {
                axios.post("/wemedia/ddMicro/delete/" + id).then(function (response) {
                    console.log("del")
                    console.log(response)
                    v.loadMicro(v.pageNum);
                    v.loadPage();
                })
            },
            loadMicro(pageNum) {
                let num;
                if (!pageNum) {
                    num = this.pageNum;
                } else {
                    num = pageNum;
                    this.pageNum = pageNum;
                }
                axios.post("/wemedia/ddMicro/" + this.userId + "/list/" + num + "/" + this.pageSize)
                    .then(function (response) {
                        console.log("micro");
                        console.log(response);
                        v.microArr = response.data.data;
                    })
            },
            loadPage() {
                axios.get("/wemedia/ddMicro/loadPage/" + this.userId).then(function (response) {
                    console.log("page:")
                    console.log(response)
                    v.pageInfo = response.data.data;
                })
            }
        },
        created: function () {
            this.loadMicro(this.pageNum);
            this.loadPage();
        }
    });
</script>
</body>
</html>